<template>
  <div class="home">
    <div class="nav">
      <!-- logo部分 -->
      <div class="logo">
        <img src="../assets/image/logo.png" alt="">
      </div>
      <!-- 导航部分 -->
      <el-menu
        :default-active="activePath"
        class="el-menu-demo" mode="horizontal"
        @select="handleSelect"
        background-color="#fff"
        text-color="black"
        active-text-color="#33AC37"
        router>
          <el-menu-item :index="item.nav+''" v-for="item in nav" :key="item.id">{{ item.name }}</el-menu-item>
      </el-menu>
      <!-- 右侧控件 -->
      <div class="user-concrol">
        <router-link class="vip" to="/About"><el-link type="danger">我的会员期限：</el-link></router-link>
        <el-dropdown @command="handleCommand" class="dropdown">
          <span class="el-dropdown-link">
            我的账户<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">账号设置</el-dropdown-item>
            <el-dropdown-item command="b">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <router-view class="content"></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activePath: '/home',
      nav: [
        {
          id: 1,
          name: '首页',
          nav: '/home'
        },
        {
          id: 2,
          name: '发送记录',
          nav: '/sendLog'
        },
        {
          id: 3,
          name: '小调查',
          nav: '/investigation'
        },
        {
          id: 4,
          name: '关于我们',
          nav: '/about'
        },
        {
          id: 5,
          name: '帮助中心',
          nav: '/help'
        }
      ]
    }
  },
  methods: {
    handleSelect () {},
    handleCommand (command) {}
  },
  created() {
    this.activePath = this.$route.path
  }
}
</script>

<style scoped>
.nav{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 50px;
  background-color: #fff;
  padding: 0 5% 0 5%;
}
/* logo */
.nav .logo{
  width: 10%;
  height: 50px;
}
.nav .logo img{
  width: 100%;
  height: 50px;
}
/* 导航 */
.el-menu-demo{
  width: 60%;
}
.el-menu--horizontal>.el-menu-item {
  height: 50px;
  line-height: 50px;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.user-concrol{
  width: 30%;
  height: 50px;
  display: flex;
}
.user-concrol .vip{
  width: 70%;
  line-height: 50px;
}
/* 右侧下拉菜单 */
.el-dropdown-link {
  cursor: pointer;
  color: black;
  line-height: 50px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.dropdown{
  height: 50px;
}
</style>
